<template>
  <div class="wa-card">
    <div class="wa-search-bar">
      <el-button type="danger" :disabled="selectRows.length===0">批量删除</el-button>
      <el-button type="success" class="wa-ml5"><i class="fa fa-plus wa-mr5"></i>新增通知</el-button>
      <div class="wa-fr">
        <el-input
            style="width: 400px"
            placeholder="标题/内容"
            clearable
            class="wa-mr10"
            :prefix-icon="Search"
        />
        <el-date-picker
            v-model="t"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        />
        <el-button class="wa-ml5" type="primary" :icon="Search" >搜索</el-button>
      </div>
    </div>

    <el-table :data="data.data" style="width: 100%" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="ID" width="50"/>
      <el-table-column prop="title" label="标题" width="300" />
      <el-table-column prop="content" label="通知内容"/>
      <el-table-column prop="publishTime" label="生效时间" width="200"/>
      <el-table-column prop="createTime" label="创建时间" width="200"/>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; height: 30px;">
      <el-pagination class="wa-fr" layout="prev, pager, next, jumper,total,sizes" hide-on-single-page background small
                     :total="data.total"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {getNotices} from "@/api/weisite/notice";

const data = reactive({
  data: [],
  total: 0
})

const t = ref([])

const selectRows = ref([])

const selectionChangeHandler = (selection) => {
  selectRows.value = selection
}

onMounted(() => {
  getNotices().then(res => {
    data.data = res.data.data.data
    data.total = res.data.data.total
  })
})
</script>

<style lang="less" scoped>
.wa-search-bar {
  margin-bottom: 20px;
}
</style>